CSS: outline

focusやaccesibility的な用途で使う

fieldにフォーカスしたときに現れる線など

focusしたときや、hover時に表示する線という感じで使われる

枠全体に一様にしか指定できない

topのみ、などの指定が出来ない

outlineはbox modelに含まれないので要素の大きさに影響を与えない

そのため、他の要素と重なることがある

つけ外しした時にガタつかない

border-image, border-radiusなどに相当するpropertyがない

本日リリースのSafari 16.4で、outlineの角丸ができるように

従来のSafari（図左）では角丸のボタンにoutlineを設定しても、要素の輪郭線は四角形になり、すっごい困っていた

他ブラウザは対応済

デモ

safariでも丸いoutline出せるようになったらしい

https://gyazo.com/add6c59436c381a91186e04b8ee4cf83 https://takayamato.com/outline-border/